import ArkSvgMap from '../ark-svg-map/ArkSvgMap.vue';
import overview from '../ark-svg-map/static/overview.svg';
import L1C1 from '../ark-svg-map/static/L1-C1.svg';
import L1C1R1 from '../ark-svg-map/static/L1-C1-R1.svg';
import L1C1R2 from '../ark-svg-map/static/L1-C1-R2.svg';
import {action} from '@storybook/addon-actions';

export default {
  title: 'base-component-v1/ArkSvgMap',
  component: ArkSvgMap,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus、lodash、echarts、svg、ArkChart</span> 使用`
      }
    }
  },
  argTypes: {
    svgPathOrReq: {description: 'SVG相对路径或获取SVG的请求函数，函数返回值为SVG图片文件内容'},
    mapName: {description: '地图注册的唯一名称'},
    initTheme: {description: 'ECharts初始化应用主题'},
    initOpts: {description: 'ECharts初始化附加参数'},
    keepDefaultOptions: {description: '是否保留默认配置，为true时提供的options将与默认配置合并，为false时提供的options不会与默认配置合并'},
    options: {description: 'ECharts配置对象，注意点请看组件内部注释部分'},
    handleSvgDomAfter: {description: '处理SVG后执行的函数，参数为{allEls、allElsInfo、circleEls、noCircleEls}'},
    instanced: {description: 'ECharts实例创建后的事件，参数为ECharts实例'},
    clickBlank: {description: '点击到SVG的空白处触发的事件'},
    mouseoverBlock: {description: '移入到SVG的块处触发的事件，参数为series.map鼠标移入事件回调参数'},
    clickBlock: {description: '点击到SVG的块处触发的事件，参数为series.map鼠标点击事件回调参数'},
    mouseoverCircle: {description: '移入到SVG的点处触发的事件，参数为series.effectScatter鼠标移入事件回调参数'},
    clickCircle: {description: '点击到SVG的点处触发的事件，参数为series.effectScatter鼠标点击事件回调参数'},
    zoomMap: {description: '放大或缩小SVG触发的事件，参数为当前视角的缩放比例'},
  }
};

let scatterData = [];
export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkSvgMap},
    setup() {
      return {args, scatterData, overview, L1C1, L1C1R1, L1C1R2};
    },
    template: `
      <div>
        <el-button type="primary" style="margin-bottom: 20px" @click="args.svgPathOrReq=overview">
          overview
        </el-button>
        <el-button type="primary" style="margin-bottom: 20px" @click="args.svgPathOrReq=L1C1;args.mapName=''">
          L1-C1
        </el-button>
        <el-button type="primary" style="margin-bottom: 20px" @click="args.svgPathOrReq=L1C1R1;args.mapName='L1C1R'">
          L1-C1-R1
        </el-button>
        <el-button type="primary" style="margin-bottom: 20px" @click="args.svgPathOrReq=L1C1R2;args.mapName='L1C1R'">
          L1-C1-R2
        </el-button>

        <ArkSvgMap v-bind="args" @instanced="handleInstanced" @clickBlank="handleClickBlank"
          @mouseoverBlock="handleMouseoverBlock" @clickBlock="handleClickBlock"
          @mouseoverCircle="handleMouseoverCircle" @clickCircle="handleClickCircle"
          @zoomMap="handleZoomMap" style="height: 500px;width: 850px"/>
      </div>`,
    methods: {
      handleInstanced: action('instanced'),
      handleClickBlank: action('clickBlank'),
      handleMouseoverBlock: action('mouseoverBlock'),
      handleClickBlock: action('clickBlock'),
      handleMouseoverCircle: action('mouseoverCircle'),
      handleClickCircle: action('clickCircle'),
      handleZoomMap: action('zoomMap')
    }
  }),
  args: {
    svgPathOrReq: L1C1,
    mapName: 'L1C1',
    keepDefaultOptions: true,
    options: {
      series: [
        {
          tooltip: {
            // extraCssText: 'padding: 0;background: none;border: none;border-radius: 23px',
            // position: 'inside',
            formatter: (params, ticket, callback) => {
              return '自定义';
              
              /**
               * 直接套用自定义元素
               *   this.$nextTick(() => {
               *       const el = this.$refs.xxx.$el;
               *       el.classList.add('!block');
               *       callback(ticket, el);
               *   })
               *   return 'Loading';
               */
            }
          },
        },
        {
          // data: scatterData
          data: [
            {name: '哈啊', circle: true, itemStyle: {color: '#E8BC0D'}, value: [200, 200]},
            {name: '啊哈', circle: true, itemStyle: {color: '#8E8E93FF'}, value: [400, 400]},
            {name: '哈哈', circle: true,},
          ],
          markPoint: {
            data: [
              {name: '111'},
              {name: '222'},
              {},
              {name: '333'},
              {name: '444'},
            ]
          }
        }
      ]
    },
    handleSvgDomAfter: ({allElsInfo}) => {
      // 动态修改散点图数据可使用该函数，并影响传入的options
      let circles = allElsInfo.filter(item => item.circle);
      circles = circles.map(item => {
        const colors = ['#34C759FF', '#FF3B30FF', '#8E8E93FF'];
        return {
          ...item,
          itemStyle: {
            color: colors[Math.floor(Math.random() * 3)]
          }
        };
      });
      scatterData = circles;
    }
  }
};